<template>
  <div class="cateListWrap">
     <mt-popup
      v-model="cateVisible"
      position="right"
      class="mintPop ">
       <top-btn @cancel="cateCancel"></top-btn>
       <div class="contentList">
        <div class="afkList" v-if="afkList.length">
          <p>小幅</p>
          <ul>
            <li v-for="item in afkList" :key="item.cateId">{{item.cateName}}<img :src="item.imgSrc" @click="toggle(item)"></li>
          </ul>
        </div>
        <div class="listJd" v-if="jdList.length">
          <p>京东</p>
          <ul>
            <li v-for="item in jdList" :key="item.cateId">{{item.cateName}}<img :src="item.imgSrc" @click="toggle(item)"></li>
          </ul>
        </div>
       </div>
      <clear-btn @cancel="clearCate"></clear-btn>
    </mt-popup>
  </div>
</template>
<script>
import unSelect from "@/assets/images/cateSelect/select.png";
import select from "@/assets/images/cateSelect/true.png";
import { mapGetters, mapMutations } from "vuex";
import ClearBtn from "@/base/clearBtn/clearBtn";
import TopBtn from "@/base/topBtn/topBtn";
export default {
  data() {
    return {
      cateVisible: false,
      jdList: [],
      afkList: []
    };
  },
  computed: {
    ...mapGetters(["catesList"])
  },
  created() {},
  methods: {
    initail() {
      this.catesList.forEach(item => {
        if (item.checked) {
          this.$set(item, "imgSrc", select);
        } else {
          this.$set(item, "imgSrc", unSelect);
        }
        if (item.supplierType == "jd_mall") {
          this.jdList.push(item);
        } else {
          this.afkList.push(item);
        }
      });
    },
    show() {
      this.cateVisible = true;
      this.initail()
    },
    hide() {
      this.cateVisible = false;
    },
    cateCancel() {
      this.hide();
    },
    toggle(item) {
      if (item.checked) {
        this.$set(item, "imgSrc", unSelect);
        this.$set(item, "checked", false);
      } else {
        this.$set(item, "imgSrc", select);
        this.$set(item, "checked", true);
      }
    },
    clearCate(){
       this.catesList.forEach(item=>{
        if(item.checked){
        this.$set(item, "imgSrc", unSelect);
        this.$set(item, "checked", false);
        }
      })
      this.$root.Bus.$emit("clearAllCate");
    },
    ...mapMutations(["SET_CATESLIST"])
  },
  components: {
    ClearBtn,
    TopBtn
  }
};
</script>

<style lang="less" scoped>
.cateListWrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .mintPop {
    width: 6.5rem;
    height: 100%;
    .contentList {
      position:fixed;
      top:0.9rem;
      bottom: 1.2rem;
      width: 6.5rem;
      overflow-y: scroll;
      .afkList {
        p {
          border-top: 2px solid #fff;
          background-color: #eee;
          height: 0.5rem;
          font-size: 0.28rem;
          line-height: 0.5rem;
          color: #4e4e4e;
          padding: 0 0 0 0.2rem;
        }
        ul {
          overflow: hidden;
          li {
            list-style: none;
            position: relative;
            height: 0.9rem;
            border-bottom: 1px solid #eee;
            line-height: 0.9rem;
            padding-left: 0.2rem;
            font-size: 0.28rem;
            img {
              width: 0.26rem;
              height: 0.26rem;
              position: absolute;
              top: 0.32rem;
              right: 0.3rem;
            }
          }
        }
      }
      .listJd {
        p {
          border-top: 2px solid #fff;
          background-color: #eee;
          height: 0.5rem;
          font-size: 0.28rem;
          line-height: 0.5rem;
          color: #4e4e4e;
          padding: 0 0 0 0.2rem;
        }
        ul {
          overflow: hidden;
          li {
            list-style: none;
            position: relative;
            height: 0.9rem;
            border-bottom: 1px solid #eee;
            line-height: 0.9rem;
            padding-left: 0.2rem;
            font-size: 0.28rem;
            img {
              width: 0.26rem;
              height: 0.26rem;
              position: absolute;
              top: 0.32rem;
              right: 0.3rem;
            }
          }
        }
      }
    }
  }
}
</style>
